<template>
  <div class="login">
    <!-- <div class="guding">
      <div>中国产学研合作促进会</div>
      <div>产学研合作创新与促进奖申报平台</div>
      <div class="guding_xia">
        <div>技术支持电话：</div>
        <div>18910278297</div>
      </div>
    </div>-->
    <div class="login_form">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="phone">
          <el-input
            type="text"
            v-model.number="ruleForm.user_name"
            placeholder="账号"
          >
            <el-button slot="prepend" class="user">
              <img src="../assets/static/img/user.png" width="10" />
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            placeholder="密码"
          >
            <el-button slot="prepend" class="user">
              <img src="../assets/static/img/mima.png" width="10" />
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="passwords" style="margin-bottom: 10px">
          <el-col :span="14">
            <el-input
              oninput="value=value.replace(/[^\d]/g,'')"
              maxlength="6"
              type="text"
              v-model="ruleForm.code"
              placeholder="请输入验证码"
              style="width: 100%; height: 100%"
            ></el-input>
          </el-col>
          <el-col :span="8" class="count_down" style="margin-left: 10px">
            <el-button
              style="width: 100%; height: 100%"
              v-if="disabled == false"
              @click="sendcode"
              class="huoqu"
              >获取验证码</el-button
            >
            <el-button
              disabled="disabled"
              type="info"
              v-if="disabled == true"
              @click="sendcode"
              >{{ btntxt }}</el-button
            >
          </el-col>
        </el-form-item>
      </el-form>
      <div class="btn" @click="btn">登录</div>
    </div>
  </div>
</template>

<script>
import { login, send_code } from "../axios/api";
// 手机号
export function elValidatePhone(rule, value, callback) {
  if (value == "") {
    return callback(new Error("请输入账号"));
  } else {
    return callback();
  }
}

// 手机号 密码
export function passPhone(rule, value, callback) {
  if (value == "") {
    return callback(new Error("密码不能为空"));
  } else {
    return callback();
  }
}

export default {
  data() {
    return {
      ruleForm: {
        user_name: "",
        password: "",
        code: "",
      },
      btntxt: "",
      isShow: false,
      disabled: false,
      rules: {
        phone: [{ validator: elValidatePhone, trigger: "blur" }],
        password: [
          // { type: "", min: 6, message: "密码最低6位", trigger: "blur" },F
          { validator: passPhone, trigger: "blur" },
        ],
      },
    };
  },

  components: {},

  methods: {
    sendcode() {
      const reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      var params = {
        user_name: this.ruleForm.user_name,
        password: this.ruleForm.password,
      };
      // this.time = 60;
      // this.disabled = true;
      // this.timer();
      send_code(params)
        .then((data) => {
          console.log(data);
          let { msg, code, user } = data;
          if (data.data.code !== 200) {
            this.$message({
              message: data.data.msg,
              type: "error",
            });
            return;
            // this.time = 60;
            // this.disabled = true;
            // this.timer();
          } else {
            this.$message({
              message: "发送成功",
              type: "success",
            });
            this.time = 60;
            this.disabled = true;
            this.timer();
          }
        })
        .catch(function (reason) {});
    },

    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    },
    check() {
      console.log(this.isShow);
    },
    enroll() {
      this.$router.push({ path: "/enroll" });
    },
    btn() {
      login(this.ruleForm).then((res) => {
        console.log(res);
        if (res.data.code != 200) {
          this.$message.error(res.data.msg);
          return;
        }

        sessionStorage.setItem("group_id", res.data.data.group_id);
        sessionStorage.setItem("is_gai", res.data.data.is_gai);
        sessionStorage.setItem("Token1", res.data.data.token);
        sessionStorage.setItem("menu", JSON.stringify(res.data.data.menu));
        sessionStorage.setItem("user_name", res.data.data.user_name);
        //  sessionStorage.setItem("user_name",'冯翔慧');
        this.$router.push({ path: res.data.data.menu[0].data[0].menu_url });
      });
    },
  },
};
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  background: url("../assets/static/img/background.jpg") no-repeat 100%;
  background-size: cover;
  overflow: hidden;
  .login_form {
    width: 500px;
    height: 400px;
    position: absolute;
    background-color: #fff;
    top: 50%;
    transform: translateY(-50%);
    left: 15%;
    box-sizing: border-box;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .username {
      display: flex;
      align-items: center;
      width: 100%;
      height: 70px;
    }
    .userpws {
      display: flex;
      align-items: center;
      width: 100%;
      height: 70px;
    }

    .icon {
      width: 70px;
      height: 70px;
      border-right: 1px solid #999999;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .ckb {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .mima {
        color: red;
        cursor: pointer;
      }
    }
    .ckb > div {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 13px;
    }
    .ckb > div:nth-child(1) {
      width: 60%;
      input {
        background: 1px solid #999;
        width: 15px;
        height: 15px;
        margin-right: 5px;
      }
    }
    .btn {
      width: 100%;
      height: 40px;
      display: flex;
      font-size: 14px;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-color: #890510;
    }
    .foter {
      font-size: 13px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}
.bor {
  border: 1px solid red;
  box-shadow: 1px 0px 5px red;
}
input::placeholder {
  color: #999999;
}
.guding {
  position: absolute;
  right: 250px;
  top: 50%;
  transform: translateY(-50%);
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  font-weight: 600;
}
.guding > div {
  font-size: 40px;
}
.guding_xia {
  display: flex;
  align-items: center;
}
.guding_xia > div:nth-child(1) {
  font-size: 30px;
}
.guding_xia > div:nth-child(2) {
  font-size: 25px;
}
.huoqu {
  font-size: 11px;
  background-color: #890510;
  color: #fff;
}
</style>